<template>
  <div class="courses-page">
    <el-card class="page-container">
      <template #header>
        <div class="card-header">
          <span>课程管理</span>
          <el-button type="primary" @click="handleAdd">
            <el-icon><Plus /></el-icon>
            新增课程
          </el-button>
        </div>
      </template>
      
      <!-- 数据表格 -->
      <el-table
        :data="tableData"
        v-loading="loading"
        class="table-container"
        stripe
      >
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="name" label="课程名称" width="200" />
        <el-table-column prop="subject_name" label="科目" width="120" />
        <el-table-column prop="total_stages" label="总阶段数" width="100" />
        <el-table-column prop="total_price" label="总价格" width="120">
          <template #default="{ row }">
            ¥{{ row.total_price }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag
              :type="row.status === 'active' ? 'success' : 'danger'"
              size="small"
            >
              {{ row.status === 'active' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="created_at" label="创建时间" width="160" />
        <el-table-column label="操作" width="250" fixed="right">
          <template #default="{ row }">
            <el-button
              type="primary"
              size="small"
              @click="handleEdit(row)"
            >
              编辑
            </el-button>
            <el-button
              type="success"
              size="small"
              @click="handleStages(row)"
            >
              阶段管理
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    
    <!-- 新增/编辑对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
    >
      <el-form
        ref="formRef"
        :model="form"
        :rules="formRules"
        label-width="100px"
        class="form-container"
      >
        <el-form-item label="课程名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入课程名称" />
        </el-form-item>
        
        <el-form-item label="科目" prop="subject_id">
          <el-select v-model="form.subject_id" placeholder="请选择科目">
            <el-option label="Python" value="1" />
            <el-option label="Java" value="2" />
            <el-option label="前端开发" value="3" />
            <el-option label="数据分析" value="4" />
            <el-option label="网络安全" value="5" />
          </el-select>
        </el-form-item>
        
        <el-form-item label="总阶段数" prop="total_stages">
          <el-input-number v-model="form.total_stages" :min="1" :max="10" />
        </el-form-item>
        
        <el-form-item label="总价格" prop="total_price">
          <el-input-number v-model="form.total_price" :min="0" :precision="2" />
        </el-form-item>
        
        <el-form-item label="课程描述" prop="description">
          <el-input
            v-model="form.description"
            type="textarea"
            placeholder="请输入课程描述"
            :rows="3"
          />
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="form.status">
            <el-radio label="active">启用</el-radio>
            <el-radio label="inactive">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmit" :loading="submitting">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import type { FormInstance, FormRules } from 'element-plus'

// 响应式数据
const loading = ref(false)
const submitting = ref(false)
const dialogVisible = ref(false)
const dialogTitle = ref('')
const formRef = ref<FormInstance>()

// 表格数据
const tableData = ref([
  {
    id: 1,
    name: 'Python基础课程',
    subject_name: 'Python',
    total_stages: 4,
    total_price: 2999.00,
    status: 'active',
    created_at: '2024-01-15 10:30:00'
  },
  {
    id: 2,
    name: 'Java进阶课程',
    subject_name: 'Java',
    total_stages: 6,
    total_price: 3999.00,
    status: 'active',
    created_at: '2024-01-15 10:30:00'
  }
])

// 表单数据
const form = reactive({
  id: null,
  name: '',
  subject_id: '',
  total_stages: 4,
  total_price: 0,
  description: '',
  status: 'active'
})

// 表单验证规则
const formRules: FormRules = {
  name: [
    { required: true, message: '请输入课程名称', trigger: 'blur' }
  ],
  subject_id: [
    { required: true, message: '请选择科目', trigger: 'change' }
  ],
  total_price: [
    { required: true, message: '请输入总价格', trigger: 'blur' }
  ]
}

// 方法
const handleAdd = () => {
  dialogTitle.value = '新增课程'
  form.id = null
  form.name = ''
  form.subject_id = ''
  form.total_stages = 4
  form.total_price = 0
  form.description = ''
  form.status = 'active'
  dialogVisible.value = true
}

const handleEdit = (row: any) => {
  dialogTitle.value = '编辑课程'
  // 只复制需要的字段，避免数字键问题
  Object.assign(form, {
    id: row.id,
    name: row.name,
    subject_id: row.subject_id,
    total_stages: row.total_stages,
    total_price: row.total_price,
    description: row.description,
    status: row.status
  })
  dialogVisible.value = true
}

const handleStages = (row: any) => {
  ElMessage.info('阶段管理功能开发中')
}

const handleDelete = async (row: any) => {
  try {
    await ElMessageBox.confirm('确定要删除这个课程吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    ElMessage.success('删除成功')
    loadData()
  } catch {
    // 用户取消
  }
}

const handleSubmit = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        ElMessage.success(form.id ? '更新成功' : '新增成功')
        dialogVisible.value = false
        loadData()
      } catch (error) {
        ElMessage.error('操作失败')
      } finally {
        submitting.value = false
      }
    }
  })
}

const loadData = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1000)
}

onMounted(() => {
  loadData()
})
</script>

<style lang="scss" scoped>
.courses-page {
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
  }
}
</style>
